<template>
	<div id="home">
	  	<div class="home_top">
	  		<top ref="top"></top>
	  	</div>
	  	
	  	<div class="home_body">
	  		<router-view ref="view"></router-view>
      	</div>
      	
      	<div class="home_bottom">
      		<bottom></bottom>
      	</div>
	</div>
</template>

<script>
	
import top from './top'
import bottom from "./bottom"

var vm;
export default {
  data: function() {
    return {
       name:'',
      
    }
  },
  components: {
  	top, bottom
  },
  methods : {  	
  },
  created : function() {
  	vm = this;
  }
}

</script>

<style scoped lang="scss">
	
	#home {
		height: 100%;
		min-width: 15rem;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.home_top {
		height: 0.8rem;
	}
	.home_body {
		min-height: calc(100% - 1.6rem);
		display: flex;
		align-items:stretch;
	}
	.home_body>div {
		width: 100%;
		min-height: 100%;
	}
	.home_bottom {
		height: 0.8rem;
	}
	
	/*滚动条*/
	#home::-webkit-scrollbar {
		width: 0.12rem;
	}
	#home::-webkit-scrollbar-thumb {
		border-radius: 0.5rem;
        background: #BBBBBB;
	}
	#home::-webkit-scrollbar-track {
        background: #F2F6FC;
	}
		
</style>